<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
    <!-- text - start -->
    <div class="mb-10 md:mb-16">
      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">
        Frequently asked questions
      </h2>

      <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">
        This is a section of some simple filler text, also known as placeholder text. It shares some
        characteristics of a real written text but is random or otherwise generated.
      </p>
    </div>
    <!-- text - end -->

    <div class="mx-auto flex max-w-screen-sm flex-col border-t">
      <!-- question - start -->
      <div class="border-b">
        <div
          class="
            flex
            cursor-pointer
            justify-between
            gap-2
            py-4
            text-black
            hover:text-indigo-500
            active:text-indigo-600
          "
        >
          <span class="font-semibold transition duration-100 md:text-lg"
            >How does the product work?</span
          >

          <span class="text-indigo-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </span>
        </div>

        <p class="mb-4 hidden text-gray-500">
          This is a section of some simple filler text, also known as placeholder text. It shares
          some characteristics of a real written text but is random or otherwise generated. It may
          be used to display a sample of fonts or generate text for testing.
        </p>
      </div>
      <!-- question - end -->

      <!-- question - start -->
      <div class="border-b">
        <div
          class="
            flex
            cursor-pointer
            justify-between
            gap-2
            py-4
            text-black
            hover:text-indigo-500
            active:text-indigo-600
          "
        >
          <span class="font-semibold transition duration-100 md:text-lg"
            >What are the features?</span
          >

          <span class="text-indigo-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </span>
        </div>

        <p class="mb-4 hidden text-gray-500">
          This is a section of some simple filler text, also known as placeholder text. It shares
          some characteristics of a real written text but is random or otherwise generated. It may
          be used to display a sample of fonts or generate text for testing.
        </p>
      </div>
      <!-- question - end -->

      <!-- question - start -->
      <div class="border-b">
        <div
          class="
            flex
            cursor-pointer
            justify-between
            gap-2
            py-4
            text-black
            hover:text-indigo-500
            active:text-indigo-600
          "
        >
          <span class="font-semibold transition duration-100 md:text-lg"
            >What about integrations?</span
          >

          <span class="text-indigo-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </span>
        </div>

        <p class="mb-4 hidden text-gray-500">
          This is a section of some simple filler text, also known as placeholder text. It shares
          some characteristics of a real written text but is random or otherwise generated. It may
          be used to display a sample of fonts or generate text for testing.
        </p>
      </div>
      <!-- question - end -->

      <!-- question - start -->
      <div class="border-b">
        <div
          class="
            flex
            cursor-pointer
            justify-between
            gap-2
            py-4
            text-black
            hover:text-indigo-500
            active:text-indigo-600
          "
        >
          <span class="font-semibold transition duration-100 md:text-lg"
            >Is support available?</span
          >

          <span class="rotate-180 text-indigo-500">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </span>
        </div>

        <p class="mb-4 text-gray-500">
          This is a section of some simple filler text, also known as placeholder text. It shares
          some characteristics of a real written text but is random or otherwise generated. It may
          be used to display a sample of fonts or generate text for testing.
        </p>
      </div>
      <!-- question - end -->
    </div>
  </div>
</div>
